web development | design | разработка

Initializr – HTML5 шаблон для разработки веб-сайтов

: kitt_vl; May 15th, 1:15

Initializr – это простой инструмент, который поможет вам начать работу над проектом на основе HTML5, автором которого является Jonathan Verrecchia. Он построен на базе HTML5 Boilerplate, мощнейшем HTML5 шаблоне, созданном Paul Irish и Divya Manian. С его помощью вы элементарно создадите HTML5 проект с необходимыми настройками файлов по вашему выбору.

Из Initializr были удалены некоторые функциональные возможности Boilerplate, но вы можете посетить сайт HTML5 Boilerplate, если они вам необходимы.

Initializr - это хорошая интерпретация HTML5 boilerplate для менее опытных и более ленивых :)

Официальный сайт - http://www.initializr.com/
Описание начала работы на русском - http://starwebdesign.com.ua/blog/2011/02/16/initializr-generator-chistogo-i-nastraivaemogo-html5-shablona-osnovannogo-na-boilerplate/

Tags: css3, framework, html5, javascript, инструменты

Подключение разных CSS в зависимости от разрешения окна браузера

: kitt_vl; March 29th, 23:12

Оригинал взят у

krogrim в Подключение разных CSS в зависимости от разрешения окна браузера

Недавно я получил заказ на верстку макета с многослойным фоном. Он состоял из нескольких иллюстраций по левому и по правому краю окна браузера. В зависимости от разрешения окна, иллюстрации должны были, либо разъезжаться (при 1440x900 и более), либо фиксироваться и оставаться за пределами окна. Вариант, создать блоки фиксированный ширины и прижать их к левому и правому краю - отпал сразу, из-за горизонтальной полосы прокрутки (манипуляции с overflow: hidden; не закончились успехом, так же центральный блок контента прыгал из стороны в сторону). В итоге, после перебора вариантов, я пришел к выводу, что проще всего и при этом наиболее надежно, будет подключить несколько CSS и в зависимости от разрешения окна браузера - переключать их... Читать далее →

Tags: css, javascript

Реализуем поддержку Drag & Drop для IOS и Android на своем сайте. / JavaScript / СвободноХабр

: kitt_vl; March 26th, 10:03

Недавно, во время выполнения одного из небольших проектов, столкнулся с интересной задачей. Клиент попросил сделать компонент «Timeline», отображающий список топовых историй, привязанных к годам, который можно было бы перелистывать перетаскиванием. Сделать такой компонент для Desktop браузеров не составило особого труда, но также необходимо было реализовать поддержку IOS и Android без разработки мобильной версии сайта.

Функционал был реализован при помощи JQuery плагина draggable и анимации из JqueryUi, по принципу обычной карусели. Сайт клиенту понравился, от мобильно версии отказались, так как он приятно выглядел и на планшетах, и мобильных устройствах на базе IOS и Android. Возникала только одна проблема, «Timeline» невозможно листать на мобильных устройствах, так как набор событий мобильно браузера с поддержкой touch отличается от набора событий в браузера PC. Для исправления положения совсем не хотелось использовать громоздкие решения Sencha Touch и Jquery Mobile. Через некоторое время поиска нашлось простое решение проблемы. Полный код приводить не буду, лишь приведу части, отвечающие за перетаскивание.

( Read more... )

Источник: СвободноХабр

Tags: android, ios, javascript, mobile

Создание элемента с эффектом 3D вращения при помощи jQuery и CSS3

: kitt_vl; February 29th, 19:58

Оригинал взят у

krogrim в Создание элемента с эффектом 3D вращения при помощи jQuery и CSS3

Сегодняшний урок посвящен созданию элемента с красивым эффектом 3D вращения. Идея проста – у нас есть элемент, на котором содержится некая информация. При нажатии на ссылку происходит вращение нашего элемента по горизонтали, и пользователь видит оборотную сторону элемента, содержащую другую информацию.

( Read more... )

Tags: css3, html5, tutorial

Bijou: высокоточные векторные миниатюрные иконки

: kitt_vl; February 25th, 12:11

Bijou – это набор красивых иконок маленького размера, выполненный с великолепной точностью до каждого пикселя. В набор вошло более 120 иконок различного предназначения: графики, действия, стрелки, смайлики и так далее. Архив по ссылке включает в себя прозрачные PNG-изображения, а также PSD-файл со всеми иконками, разделенными по слоям, а также файл пользовательских форм для Photoshop (CSH).

Вы можете использовать данный набор бесплатно в личных или коммерческих проектах.
Скачать http://bijou.im/download

Взято отсюда

Tags: Иконки

Шпаргалки по HTML5

: kitt_vl; February 12th, 8:00

Три шпаргалки по HTML5: тэги, события и поддержка браузерами различных возможностей HTML5.
Тэги и события разбиты на группы - новые, оставшиеся, не поддерживаемые в HTML5.

Под катом превью и ссылки на оригинальный размер.

( Смотреть )

Tags: cheatsheet, html5, javascript

Dojo 1.8

: kitt_vl; February 11th, 10:13

9 февраля вышла новая версия джаваскрипт библиотеки Dojo под номером 1.8.

Основные изменения:

Новый отдельный компонент Router
Новый компонент ввода\вывода (заменяющий существующий XHR модуль)
новый компонент UI календарь
новый парсер документации
поддержка Touch & HTML5 для Dojo DnD
Объединенный Touch API для Dijit, Dojo Mobile и графических модулей
Улучшенная поддержка мобильных устройств виджетами и библиотекой в целом, включая начало сближения Dojo Mobile и Wink Toolkit
Улучшенная поддержка SVG и Canvas в dojox.gfx
Улучшеное управление жизненным циклом dojox.app
Улучшенная привязка данных в dojox.mvc
Больше демонстрационных приложений
Багфиксы в генерации CLDRи многое другое

http://dojotoolkit.org/blog/whats-coming-in-dojo-1-8

Tags: dojo, framework, html5, javascript

Reverie – это фреймворк для WordPress, написанный на HTML5

: kitt_vl; February 10th, 20:39

HTML5-ready тема оформления для Вордпресс, основанная на ZURB's Foundation, и HTML5 Boilerplate.

http://themefortress.com/reverie/

Tags: cms, css3, html5, wordpress

TagCanvas: анимированное облако тэгов, разработанное с помощью HTML5 Canvas

: kitt_vl; February 10th, 10:47

С появлением тренда web2.0, самыми популярными элементами веб-дизайна стали облака тэгов. И они были (и по прежнему остаются) самыми удобными инструментами для поиска нужной информации на конкретную тему. Со временем стали появляться анимированные облака тэгов на Flash. Сегодня же, когда «смерть» технологии Flash уже почти констатирована, повсеместно стали внедрять облака тэгов, разработанные при помощи возможностей HTML5.

TagCanvas: анимированное облако тэгов, разработанное с помощью HTML5 Canvas

TagCanvas – это плагин jQuery, работающий на основе HTML5 Canvas, и позволяющий создавать привлекательные анимированные облака тэгов. Элемент также может быть установлен отдельно, без привязки к jQuery.

Здесь имеется поддержка текста и изображений, облаку можно придать форму сферы, вертикального или горизонтального цилиндра. Вы можете оперировать множеством настроек, которые позволят вам максимально адаптировать внешний вид под дизайн вашего ресурса.

Требования: Отсутствуют
Совместимость: Все современные браузеры

Демо, описание на английском, ссылка для скачивания плагина http://www.goat1000.com/tagcanvas.php
источник

Tags: canvas, html5, javascript, jquery, инструменты

Опубликован черновик стандарта WebRTC 1.0

: kitt_vl; February 10th, 10:33

9.02.2012 был опубликован черновой вариант стандарта WebRTC http://www.w3.org/TR/2012/WD-webrtc-20120209/

WebRTC (real-time communications — коммуникаций в реальном времени) — интернет-протокол, с открытым исходным кодом, предназначенный для организации голосовой и видеосвязи через интернет в режиме реального времени.
Его включение в World Wide Web Consortium (W3C) поддерживается Google, Mozilla и Opera. WebRTC распространяется по лицензии BSD-3 и исходный код основывается на продукте от Global IP Solution, которая была куплена компанией Google в мае 2010.(вики)

Ранее представители Mozilla Foundation публиковали черновик стандарта MediaStream Processing, который описывает спецификации WebRTC, предназначенные для реализации технологий для работы с аудио и видеоконтентом без стороннего программного обеспечения.

Постоянная ссылка на последний вариант стандарта WebRTC http://www.w3.org/TR/webrtc/

Tags: mozilla, w3c, webrtc

Previous 10

ru_web_dev

web development | design | разработка